<template>
	<view class="container">
		      {{props.index}}.  
		<text v-for="(v,k) in titleFormat" :key="k">
			{{v}}<text v-if="k < titleFormat.length - 1" class="textD" @click="tofill(k)">{{fills[k]}}</text>
		</text>
		<iceDialog :msgParams="msgParams2.value" mode="input" :value="value" @iceClose="iceClose" />
	</view>
</template>
<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import iceDialog from '@/components/onceMore/iceDialog.vue'
	const props = defineProps({
		title: {
			type: String
		},
		index: {
			type: Number
		},
		option: {
			type: Object
		},
		k: {
			type: Number
		}
	})
	const emits = defineEmits(['answer'])
	const msgParams2 = reactive({
		value: {}
	})
	const value = ref('') // 弹窗的值
	const fillStr = ref('___') // 要分割的填空
	const fillStrSpace = ref('     ') // 填充物(占位符)
	const titleFormat = ref([]) // 格式化后的题
	const fills = ref([]) // 填空的数组
	const fillIndex = ref(0) // 填空的索引
	const answerArr = ref([])
	if (props.title) titleFormat.value = props.title.split(fillStr.value) // 格式化的题
	// titleFormat.value.pop() // 删除最后一项（不应该删除最后一项，因为template是输出的数组，应该是最后一遍不输出数组），ps：pop()只是改变原数组，不会有返回 所以不能一直.xxx().xxx()
	// 填充要储存填空内容的数组
	for (let item of titleFormat.value) {
		fills.value.push(fillStrSpace.value)
	}
	// 点击填空的位置，弹出对话框
	const tofill = (k) => {
		fillIndex.value = k
		msgParams2.value = {
			title: '请输入要填的内容',
			placeholder: `第${k+1}空`,
			isOpen: true
		}
		// 回显对话框默认的内容，如果是填充物(占位符)，赋值为空，反之是已填写的内容
		value.value = fills.value[fillIndex.value] == fillStrSpace.value ? '' : fills.value[fillIndex.value]
	}
	// 对话框点击确定之后
	const iceClose = (str) => {
		fills.value[fillIndex.value] = str == 'confirm' ? fillStrSpace.value : str
		// 更新数组，emits给父组件
		answerArr.value[fillIndex.value] = fills.value[fillIndex.value]
		emits('answer',{'index':props.k,'question_id':props.option.id,'type':props.option.type,'score':props.option.score,'answer':answerArr.value.toString()})
	}
</script>
<style lang="scss" scoped>
	.container {
		width: 94%;
		margin: 0 auto;
		line-height: 30px;

		.textD {
			text-decoration: underline;
			background-color: #c5d7ee;
			padding: 0 4rpx;
		}
	}
</style>